<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="cvs"></canvas>
    <script>
      const FONT_SIZE = 20;

      const cvs = document.getElementById("cvs");
      const width = document.body.clientWidth;
      const height = document.body.clientHeight;
      cvs.width = width;
      cvs.height = height;

      const ctx = cvs.getContext("2d");
      const drawWidth = FONT_SIZE;
      const cols = Math.floor(document.body.clientWidth / drawWidth);
      const rows = Math.floor(document.body.clientWidth / FONT_SIZE);

      const rowIds = new Array(cols)
        .fill(0)
        .map(() => Math.floor(Math.random() * 5));

      function getRandomText() {
        const texts = "1234567890abcdefghijklmopqrstuvwxyz";
        const len = texts.length;
        return texts[Math.floor(Math.random() * len)];
      }

      function getRandomColor() {
        const color = new Array(3)
          .fill(0)
          .map(() => Math.random() * 255)
          .join(",");
        return `rgb(${color})`;
      }

      function draw() {
        ctx.fillStyle = "rgba(255,255,255,0.05)";
        ctx.fillRect(0, 0, width, height);
        ctx.font = `${FONT_SIZE}px Georgia`;
        for (let i = 0; i < cols; i++) {
          ctx.fillStyle = getRandomColor();
          ctx.fillText(
            getRandomText(cols),
            i * drawWidth,
            rowIds[i] * FONT_SIZE
          );
          if (Math.random() > 0.1) {
            rowIds[i]++;
          }
          if (rowIds[i] >= rows) {
            rowIds[i] = 0;
          }
        }

        requestAnimationFrame(draw);
      }

      draw();
      // setInterval(draw, 1000);
    </script>
  </body>
</html>
